<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <title>注册</title>
    <link rel="stylesheet" href="css/globe.css"/>
    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
    <script>
        $(function () {
            $("#username").blur(checkUsername);
            $("#password").blur(checkPassword);
            $("#trueName").blur(checkName);
            $("#telephone").blur(checkTelephone);
        });

        function register() {
            if (!(checkUsername() && checkPassword() && checkName() && checkTelephone())) {
                $("#msg").text("信息输入有误！");
                return;
            }
            let username = $("#username").val();
            let password = $("#password").val();
            let trueName = $("#trueName").val();
            let telephone = $("#telephone").val();
            let city = $("#city").val();
            let address = $("#address").val();

            $.ajax({
                url: "${pageContext.request.contextPath}/user/register",
                type: "post",
                dataType: "json",
                data: {
                    username: username,
                    password: password,
                    trueName: trueName,
                    telephone: telephone,
                    city: city,
                    address: address
                },
                success: function (data) {
                    if (data.flag) {
                        window.location.href = "${pageContext.request.contextPath}/" + data.data;
                    } else {
                        $("#msg").text(data.infoMsg);
                    }
                },
                error: function () {
                    alert("发送失败");
                }
            });
        }

        function checkUsername() {
            var username = $("#username").val();
            var reg = /^\w{3,12}$/;
            var flag = reg.test(username);
            var mess = document.querySelector('.mess_u');
            if (flag) {
                $("#username").css('border', '');
                mess.innerHTML = '';
            } else {
                $("#username").css('border', '1px solid red');
                mess.innerHTML = '用户名长度不符！';

            }
            return flag;
        }

        function checkPassword() {
            var password = $("#password").val();
            var reg = /^\w{8,20}$/;
            var flag = reg.test(password);
            var mess = document.querySelector('.mess_p');
            if (flag) {
                $("#password").css('border', '');
                mess.innerHTML = '';
            } else {
                $("#password").css('border', '1px solid red');
                mess.innerHTML = '密码长度有误！';
            }
            return flag;
        }

        function checkName() {
            var trueName = $("#trueName").val();
            var reg = /^[\u4e00-\u9fa5]{2,6}$/ig;
            var flag = reg.test(trueName);
            var mess = document.querySelector('.mess_n');
            if (flag) {
                $("#trueName").css('border', '');
                mess.innerHTML = '';

            } else {
                $("#trueName").css('border', '1px solid red');
                mess.innerHTML = '姓名格式有误！';
            }
            return flag;
        }

        function checkTelephone() {
            var telephone = $("#telephone").val();
            var reg = /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/;
            var flag = reg.test(telephone);
            var mess = document.querySelector('.mess_t');
            if (flag) {
                $("#telephone").css('border', '');
                mess.innerHTML = '';

            } else {
                $("#telephone").css('border', '1px solid red');
                mess.innerHTML = '请输入正确的手机号！';
            }
            return flag;
        }
    </script>
    <style>
        form {
            height: 350px;
            width: 400px;
            margin: 100px auto;
            padding-top: 20px;
            border: 2px dashed pink;
        }

        form table {
            margin: auto;
            border-collapse: separate;
            border-spacing: 10px;
        }

        th {
            padding: 0 4px;
        }

        p {
            font-size: 6px;
        }
    </style>
</head>
<body>
<jsp:include page="user_bar.jsp"/>
<form action="javascript:register();" method="post">
    <table>
        <caption>注册</caption>
        <tr>
            <th>用户名</th>
            <th>
                <input type="text" id="username" name="username" placeholder="请输入3-12位用户名"/>
                <p class="mess_u col-red"></p>
            </th>
        </tr>
        <tr>
            <th>密码</th>
            <th>
                <input type="password" id="password" name="password" placeholder="请输入8-20位密码"/>
                <p class="mess_p col-red"></p>
            </th>
        </tr>
        <tr>
            <th>真实姓名</th>
            <th>
                <input type="text" id="trueName" name="trueName" placeholder="请输入真实姓名"/>
                <p class="mess_n col-red"></p>
            </th>
        </tr>
        <tr>
            <th>电话</th>
            <th>
                <input type="text" id="telephone" name="telephone" placeholder="请输入11位手机号"/>
                <p class="mess_t col-red"></p>
            </th>
        </tr>
        <tr>
            <th>所在城市</th>
            <th>
                <input type="text" id="city" name="city" placeholder="请输入所在城市(可选)"/>
                <p class="mess_c col-red"></p>
            </th>
        </tr>
        <tr>
            <th>地址</th>
            <th>
                <input type="text" id="address" name="address" placeholder="请输入地址(可选)"/>
                <p class="mess_a col-red"></p>
            </th>
        </tr>
        <tr>
            <th><input type="submit" value="注册"></th>
            <th><input type="reset" value="重置"/></th>
        </tr>
        <tr>
            <th colspan="2">
                <p id="msg">&nbsp;</p>
            </th>
        </tr>
        <tr>
            <th colspan="2">
                <a href="login.jsp">已有账号？跳转登录</a>
            </th>
        </tr>
    </table>
</form>
</body>
</html>
